<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/9/6
  Time: 13:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<style>
    * {
        margin: 0;
        padding: 0;
        font-family: "Microsoft Yahei", "微软雅黑";
        box-sizing: border-box;
    }

    html,body{
        width: 100%;
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
    }
    body {
        position: relative;
        background: #fff;
        overflow: hidden;
        transition: all .5s;
    }

    .background_01 {
        background: rgba(0, 0, 0, .6);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        display: none;
        transition: all .5s;
        transition-delay: .1s;
        -moz-transition-delay: .5s; /* Firefox 4 */
        -webkit-transition-delay: .5s; /* Safari 和 Chrome */
        -o-transition-delay: .5s; /* Opera */
        z-index: 9;
    }
    .background_02 {
        left: 70%;

    }

    .header {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9;
        transition: all .5s;
    }
    .header_01 {
        left: 70%;
    }


    .header .head {
        width: 100%;
        height: 1rem;
        background: #fff;
        overflow: hidden;
    }

    .header .head .nav_but {
        width: .33rem;
        height: 100%;
        position: relative;
        display: inline-block;
        margin-left: .3rem;
        float: left;
    }

    .header .head .nav_but img {
        width: .33rem;
        height: .23rem;
        position: absolute;
        top: 50%;
        margin-top: -.115rem;
    }

    .header .head .logo_box {
        width: 90%;
        height: 100%;
        display: inline-block;
        float: left;
        text-align: center;

    }

    .header .head .logo_box img {
        width: 2.3rem;
        margin-top: .16rem;
    }

    .nav_left {
        width: 72%;
        height: 100%;
        background: #fff;

        position: fixed;
        top: 0;
        left: -72%;

        transition: all .5s;
        z-index: 999;

    }
    .dynamic {
        left: 0;
    }

    .nav_left ul li {
        margin-top: .8rem;
        padding-left: .4rem;
    }

    .nav_left ul li:nth-child(1) {
        margin-top: 1rem;
    }

    .nav_left ul li:after {
        content: '';
        display: block;
        clear: both;
    }

    .nav_left ul li .icon_box {
        width: .38rem;
        height: .38rem;
        position: relative;
        display: inline-block;
        float: left;
        overflow: hidden;
    }

    .nav_left ul li .icon_box img {
        width: 100%;
        height: .36rem;
        position: absolute;
        top: 50%;
        margin-top: -.2rem;
    }

    .nav_left ul li span {
        color: #000;
        font-size: .3rem;
        display: inline-block;
        margin-left: .2rem;
        line-height: .38rem;
        float: left;
    }

</style>
<script>
    $(function () {
        $(".nav_but").click(function () {
            console.log("1111111111");
            $("body").css({"padding-left": "70%"});
            $(".nav_left").addClass("dynamic");
            $(".background_01").addClass('background_02');

            setTimeout(function () {
                $(".background_01").show();
            },250);
            $('.header').addClass('header_01');
        });
        $(".background_01").click(function () {
            $(".nav_left").removeClass("dynamic");
            $(".background_01").removeClass('background_02');
            $(this).hide();
            $("body").css({"padding-left": "0"});
            $('.header').removeClass('header_01');
        });
    })
</script>


<div class="header">
    <div class="head">
        <div class="nav_but"><img src="/static/images/downLoad/wap/nav_but.png" alt=""></div>
        <div class="logo_box"><a href="javascript:;"><img src="/static/images/index/wap/logo_new.png" alt=""></a></div>
    </div>

</div>
<div class="background_01"></div>

<div class="nav_left">

    <ul>
        <li>
            <a href="/index.html">
                <div class="icon_box"><img src="/static/images/index/wap/home_01.png" alt=""></div>
                <span>首页</span>
            </a>
        </li>
        <li>
            <a href="/downLoad/index.html">
                <div class="icon_box"><img src="/static/images/index/wap/download_icon.png" alt=""></div>
                <span>app下载</span>
            </a>
        </li>
        <li>
            <a href="/messageBoard/index.html">
                <div class="icon_box"><img src="/static/images/index/wap/contact_icon.png" alt=""></div>
                <span>联系我们</span>
            </a>
        </li>
    </ul>
</div>